---
title: Chakra UI + Next.js
description: Adding Chakra UI Components to Next.js sites
tags: ["next.js", "next", "websites", "ssr", "ssg"]
author: Mzaien
---

Chakra UI is a great UI library to get your Next.js website up and running fast
and accessibly.

**The way to setup Chakra with Next.js shown in this Guide:**

## Chakra-v1

To get started, install the core Chakra UI package:

```zsh
npm i @chakra-ui/react
# or
yarn add @chakra-ui/react
```

After installation, you'll need to add Chakra providers

### Chakra providers

Chakra exposes the `ChakraProvider` component, which wraps your website with a
context containing the Chakra theme, color mode functionality, CSS reset, global
styles, and more.

Use it in `pages/_app.js`:

```js live=false
import { ChakraProvider } from "@chakra-ui/react"
function MyApp({ Component, pageProps }) {
  return (
    <ChakraProvider>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}
export default MyApp
```
